<template>
  <div id="app">
<!--   router-link是已经内置了的全局组件  最终会被渲染成a标签   -->
<!--    <router-link to="/home" tag="button" replace active-class="active">首页</router-link>-->
<!--    <router-link to="/about" tag="button" replace active-class="active">关于</router-link>-->
<!--   router-view用于占位  表示渲染在哪个位置，左边右边上面还是下面 -->
<!--    路由切换的时候，切换的是router-view挂载的组件，其他内容不会改变-->
<!--    <router-view></router-view>-->



<!--    <button @click="homeClick">首页</button>-->
<!--    <button @click="aboutClick">关于</button>-->

    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
<!--    <router-link v-bind:to="'/user/'+userId ">用户</router-link>-->
<!--    <router-link v-bind:to="{ path:'/profile',query:{-->
<!--      name:'why',-->
<!--      age:18,-->
<!--      height:1.88,-->
<!--    }}">档案</router-link>-->
    <button @click="userClick">用户</button>
    <button @click="profileClick">档案</button>

    <keep-alive exclude="Profile,User">
        <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      userId:'张三',
      imgUrl:'https://pic.ibaotu.com/02/05/48/74b888piCczg.jpg-1.jpg!ww7002'
    }
  },
  methods:{
    homeClick(){
      console.log('homeClick')
      //通过代码的方式来修改路径 vue-router在所有组件中都有一个属性叫$router，不要直接使用.push
      //push => pushState       replace => replaceState
      // this.$router.push('/home')
      this.$router.replace('/home')
    },
    aboutClick(){
      console.log('aboutClick')
      //通过代码的方式来修改路径
      // this.$router.push(('/about'))
      this.$router.replace('/about')
    },
    userClick(){
      this.$router.replace('/user/'+ this.userId)
    },
    profileClick(){
      this.$router.replace({
        path:'/profile',
        query:{
          name:'kobe',
          height:'188',
          age:20,
        }
      })
    },
  }
}
</script>

<style>
  .active{
    color: red;
  }
</style>
